<%--
  Created by IntelliJ IDEA.
  User: 李元峰
  Date: 2022/10/1
  Time: 21:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">

    <title>Jobster - Companies list v2</title>
</head>
<body>
<div class="pxp-preloader"><span>Loading...</span></div>

<jsp:include page="/web/personal/inc/indexHead"/>
<section class="pxp-page-header-simple" style="background-color: var(--pxpSecondaryColor);">
    <div class="pxp-container">
        <h1 class="text-center" style="font-family: '宋体';font-weight: bold;">搜索 公司</h1>
        <div class="pxp-hero-subtitle pxp-text-light text-center">为世界上最好的公司工作</div>
    </div>
</section>

<section class="mt-100">
    <div class="pxp-container">
        <div class="row">
            <div class="col-lg-5 col-xl-4 col-xxl-3">
                <div class="pxp-companies-list-side-filter">
                    <div class="pxp-list-side-filter-header d-flex d-lg-none">
                        <div class="pxp-list-side-filter-header-label">Filter Jobs</div>
                        <a role="button"><span class="fa fa-sliders"></span></a>
                    </div>
                    <div class="mt-4 mt-lg-0 d-lg-block pxp-list-side-filter-panel">
                        <h3>根据关键字查询（公司名称）</h3>
                        <div class="mt-2 mt-lg-3">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-search"></span></span>
                                <input type="text" class="form-control" placeholder="公司名字或者关键字" id="title">
                            </div>
                        </div>

                        <h3 class="mt-3 mt-lg-4">位置</h3>
                        <div class="mt-2 mt-lg-3">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-globe"></span></span>
                                <input type="text" class="form-control" placeholder="输入位置或关键字" id="location">
                            </div>
                        </div>

                        <h3 class="mt-3 mt-lg-4">公司类别</h3>
                        <div class="mt-2 mt-lg-3">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-folder-o"></span></span>
                                <select class="form-select" id="positionType">
                                    <option selected value="0">所有类别</option>
                                    <c:forEach items="${requestScope.positionTypes}" var="positionType">
                                        <option value="${positionType.id}">${positionType.typeName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <h3 class="mt-3 mt-lg-4">公司性质</h3>
                        <div class="mt-2 mt-lg-3">
                            <div class="input-group">
                                <span class="input-group-text"><span class="fa fa-folder-o"></span></span>
                                <select class="form-select" id="companyNature">
                                    <option selected value="0">所有性质</option>
                                    <c:forEach items="${requestScope.companyNatures}" var="companyNature">
                                        <option value="${companyNature.id}">${companyNature.companyNatureInfo}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

                        <h3 class="mt-3 mt-lg-4">公司规模</h3>
                        <div class="list-group mt-2 mt-lg-3">
                            <c:forEach items="${requestScope.companySizes}" var="companySize">
                            <label class="list-group-item d-flex justify-content-between align-items-center mt-2 mt-lg-3">
                                        <span class="d-flex">
                                            <input class="form-check-input me-2 companySize" type="checkbox" value="${companySize.id}">
                                            ${companySize.companySizeInfo}
                                        </span>
                                <span class="badge rounded-pill">${companySize.companyCount}</span>
                            </label>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 col-xl-8 col-xxl-9">
                <div class="pxp-companies-list-top mt-4 mt-lg-0">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-auto">
                            <h2><span class="pxp-text-light">为您筛选了</span> <span id="companyCount"></span> <span class="pxp-text-light">家公司</span></h2>
                        </div>
                        <div class="col-auto">
                            <select class="form-select" id="search">
                                <option value="0" selected>最热门的公司</option>
                                <option value="1">最新的公司</option>
                                <option value="2">在招职位最多的</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div id="companyList">


<%--                    <div class="col-auto">--%>
<%--                        <a href="#" class="btn rounded-pill pxp-section-cta mt-3 mt-sm-0">Show me more<span class="fa fa-angle-right"></span></a>--%>
<%--                    </div>--%>
                </div>
            </div>
        </div>
    </div>
</section>

<footer class="pxp-main-footer mt-100">
    <div class="pxp-main-footer-top pt-100 pb-100" style="background-color: var(--pxpMainColorLight);">
        <div class="pxp-container">
            <div class="row">
                <div class="col-lg-6 col-xl-5 col-xxl-4 mb-4">
                    <div class="pxp-footer-logo">
                        <a href="index.html" class="pxp-animate"><span style="color: var(--pxpMainColor)">j</span>obster</a>
                    </div>
                    <div class="pxp-footer-section mt-3 mt-md-4">
                        <h3>Call us</h3>
                        <div class="pxp-footer-phone">(123) 456-7890</div>
                    </div>
                    <div class="mt-3 mt-md-4 pxp-footer-section">
                        <div class="pxp-footer-text">
                            90 Fifth Avenue, 3rd Floor<br>
                            San Francisco, CA 1980<br>
                            office@jobster.com
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-7 col-xxl-8">
                    <div class="row">
                        <div class="col-md-6 col-xl-4 col-xxl-3 mb-4">
                            <div class="pxp-footer-section">
                                <h3>For Candidates</h3>
                                <ul class="pxp-footer-list">
                                    <li><a href="jobs-list-1.html">Find Jobs</a></li>
                                    <li><a href="candidate-dashboard.html">Candidate Dashboard</a></li>
                                    <li><a href="candidate-dashboard-applications.html">My Applications</a></li>
                                    <li><a href="candidate-dashboard-fav-jobs.html">Favourite Jobs</a></li>
                                    <li><a href="candidate-dashboard-inbox.html">My inbox</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4 col-xxl-3 mb-4">
                            <div class="pxp-footer-section">
                                <h3>For Employers</h3>
                                <ul class="pxp-footer-list">
                                    <li><a href="candidates-list-1.html">Find Candidates</a></li>
                                    <li><a href="company-dashboard.html">Company Dashboard</a></li>
                                    <li><a href="company-dashboard-new-job.html">Post a Job</a></li>
                                    <li><a href="company-dashboard-jobs.html">Manage Jobs</a></li>
                                    <li><a href="company-dashboard-candidates.html">Candidates</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4 col-xxl-3 mb-4">
                            <div class="pxp-footer-section">
                                <h3>About Us</h3>
                                <ul class="pxp-footer-list">
                                    <li><a href="about-us.html">About Us</a></li>
                                    <li><a href="pricing.html">Pricing</a></li>
                                    <li><a href="blog-list-1.html">Blog</a></li>
                                    <li><a href="blog-list-1.html">Contact Us</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4 col-xxl-3 mb-4">
                            <div class="pxp-footer-section">
                                <h3>Helpful Resources</h3>
                                <ul class="pxp-footer-list">
                                    <li><a href="faqs.html">FAQs</a></li>
                                    <li><a href="sign-in.html">Sign In</a></li>
                                    <li><a href="sign-up.html">Sign Up</a></li>
                                    <li><a href="404.html">404 Page</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pxp-main-footer-bottom" style="background-color: var(--pxpSecondaryColor);">
        <div class="pxp-container">
            <div class="row justify-content-between align-items-center">
                <div class="col-lg-auto">
                    <div class="pxp-footer-copyright pxp-text-light">© 2021 Jobster. All Right By <a href="http://www.bootstrapmb.com/">bootstrapmb</a>.</div>
                </div>
                <div class="col-lg-auto">
                    <div class="pxp-footer-social mt-3 mt-lg-0">
                        <ul class="list-unstyled">
                            <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                            <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                            <li><a href="#"><span class="fa fa-instagram"></span></a></li>
                            <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<div class="modal fade pxp-user-modal" id="pxp-signin-modal" aria-hidden="true" aria-labelledby="signinModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="pxp-user-modal-fig text-center">
                    <img src="images/signin-fig.png" alt="Sign in">
                </div>
                <h5 class="modal-title text-center mt-4" id="signinModal">Welcome back!</h5>
                <form class="mt-4">
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" id="pxp-signin-email" placeholder="Email address">
                        <label for="pxp-signin-email">Email address</label>
                        <span class="fa fa-envelope-o"></span>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control" id="pxp-signin-password" placeholder="Password">
                        <label for="pxp-signin-password">Password</label>
                        <span class="fa fa-lock"></span>
                    </div>
                    <a href="#" class="btn rounded-pill pxp-modal-cta">Continue</a>
                    <div class="mt-4 text-center pxp-modal-small">
                        <a href="#" class="pxp-modal-link">Forgot password</a>
                    </div>
                    <div class="mt-4 text-center pxp-modal-small">
                        New to Jobster? <a role="button" class="" data-bs-target="#pxp-signup-modal" data-bs-toggle="modal" data-bs-dismiss="modal">Create an account</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade pxp-user-modal" id="pxp-signup-modal" aria-hidden="true" aria-labelledby="signupModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="pxp-user-modal-fig text-center">
                    <img src="images/signup-fig.png" alt="Sign up">
                </div>
                <h5 class="modal-title text-center mt-4" id="signupModal">Create an account</h5>
                <form class="mt-4">
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" id="pxp-signup-email" placeholder="Email address">
                        <label for="pxp-signup-email">Email address</label>
                        <span class="fa fa-envelope-o"></span>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control" id="pxp-signup-password" placeholder="Create password">
                        <label for="pxp-signup-password">Create password</label>
                        <span class="fa fa-lock"></span>
                    </div>
                    <a href="#" class="btn rounded-pill pxp-modal-cta">Continue</a>
                    <div class="mt-4 text-center pxp-modal-small">
                        Already have an account? <a role="button" class="" data-bs-target="#pxp-signin-modal" data-bs-toggle="modal">Sign in</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>

<script type="text/javascript">
    $(function (){
        updateCompany(1);
        $("#companyList").on("click",".updatePage",function (){
           let pageNum = $(this).html();
           updateCompany(pageNum);
        });
        $("#title").blur(function (){
           updateCompany(1);
        });
        $("#location").blur(function (){
            updateCompany(1);
        });
        $("#positionType").change(function (){
           updateCompany(1);
        });
        $("#companyNature").change(function (){
            updateCompany(1);
        });
        $(".companySize").click(function (){
            if ($(this).parent().parent().attr("class")=="list-group-item d-flex justify-content-between align-items-center mt-2 mt-lg-3")
            {
                $(this).parent().parent().attr("class","list-group-item d-flex justify-content-between align-items-center mt-2 mt-lg-3 pxp-checked");
            }
            else
            {
                $(this).parent().parent().attr("class","list-group-item d-flex justify-content-between align-items-center mt-2 mt-lg-3");
            }
           updateCompany(1);
        });
        $("#search").change(function (){
            updateCompany(1);
        });
        $("#companyList").on("click",".preNum",function (){
            let pageNum = $("#nowPage").val();
            pageNum--;
            updateCompany(pageNum);
            return false;
        });
        $("#companyList").on("click",".nextNum",function (){
            let pageNum = $("#nowPage").val();
            pageNum++;
            updateCompany(pageNum);
            return false;
        });
    });

    function updateCompany(pageNum)
    {
        var data = {pageNum:pageNum,name:null,cityName:null,positionTypeId:null,companyNatureId:null,companySizeIds:null,search:null}
        var name = $("#title").val();
        if (name!="")
        {
            data.name=name;
        }
        var cityName = $("#location").val();
        if (cityName!="")
        {
            data.cityName=cityName;
        }

        var positionTypeId = $("#positionType").val();
        if (positionTypeId!=0)
        {
            data.positionTypeId = positionTypeId;
        }

        var companyNatureId = $("#companyNature").val();
        if (companyNatureId!=0)
        {
            data.companyNatureId = companyNatureId;
        }

        var companySizeIds = new Array();
        $(".companySize").each(function (){
           if($(this).prop("checked"))
           {
               companySizeIds.push($(this).val());
           }
        });
        if (companySizeIds.length!=0)
        {
            data.companySizeIds=companySizeIds;
        }

        var search = $("#search").val();
        data.search = search;

        $.ajax({
            url:"/web/personal/updateCompanyList",
            type:"post",
            traditional: true,
            data:data,
            success:function (mes){
                $("#companyList").html(mes);
                $("#companyCount").html($("#company-count").val());
            }
        });

    }
</script>
</body>
</html>

